<template>
	<view>
		<view class="top-card">
			
			<view class="top">
				<view class="top-left">
					￥
				</view>
				<view class="top-right">
					{{balance}}
				</view>
			</view>
			<view class="content">
				<view class="content-left">
					<view class="left-title">
						收入
					</view>
					<view class="left-content">
						<view class="left">
							￥
						</view>
						<view class="right">
							{{income}}
						</view>
					</view>
				</view>
				<view class="content-right">
					<view class="right-title">
						支出
					</view>
					<view class="right-content">
						<view class="left">
							￥
						</view>
						<view class="right">
							{{pay}}
						</view>
					</view>
				</view>
			</view>
			<view class="operate">
				<view class="operate-left">
					<u-button type="primary" size="medium" @click="recharge()">余额充值</u-button>
				</view>
				<view class="operate-right">
					<u-button type="success" size="medium" @click="withdraw()">我要提现</u-button>
				</view>
			</view>
		</view>
		
		<u-sticky>
			<view class="tabs">
				<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="tabChange"></u-tabs>
			</view>
		</u-sticky>
		
		<view class="data" v-if="current == 0">
			<view class="data-opt">
				<u-dropdown ref="uDropdown" @open="open" @close="close">
					<u-dropdown-item 
					v-model="value1" 
					:title="dropTitle" 
					:options="options1" 
					@change="dropChange"
					>
				</u-dropdown-item>
				</u-dropdown>
			</view>
			<view class="data-content" v-for="(item,id) in balanceRecord" :key="id">
				<view class="title">
					{{item.type}}
				</view>
				<view class="math" v-if="">
					-{{item.money}}
				</view>
				<view class="time">
					{{item.createtime | dateFormat}}
				</view>
			</view>
		</view>
	
		<view class="data" v-if="current == 1">
			<view class="data-content" v-for="(item,id) in rechargeRecord" :key="id">
				<view class="title">
					{{item.content}}
				</view>
				<view class="math">
					+{{item.money}}
				</view>
				<view class="time">
					{{item.createtime | dateFormat}}
				</view>
			</view>
		</view>
		<view class="data" v-if="current == 2 || balanceRecord == ''">
			<u-empty text="暂无记录" mode="list"></u-empty>
		</view>
		
		<u-popup v-model="rechargeShow" mode="bottom" border-radius="20" height="500px">
			<view class="recharge">
				<view class="recharge-title">
					<p>充值金额</p>
				</view>
				<view class="recharge-content">
					<view class="content-left">
						<p>￥</p>
					</view>
					<view class="content-right">
						<u-input  @click="chancel" v-model="rechargeValue" type="number" border="false" placeholder="请输入充值金额"/>
					</view>
				</view>
				<view class="recharge-keyboard">
					<u-keyboard 
						ref="uKeyboard"
						mode="number" 
						v-model="rechargeKeyboard"
						:mask="false"
						:mask-close-able="false"
						@change="rechargeval" 
						@backspace="rechargeback"
						@confirm="subRecharge"
						:cancel-btn="false"
						>
					</u-keyboard>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: '',//域名地址
				userData: [],//用户信息
				balance: 0.00,//余额
				income: 0.00,//收入
				pay: 0.00,//支出
				tabList: [
					{
						name: '余额明细'
					}, {
						name: '充值记录'
					},{
						name: '提现记录'
					},
				],
				current: 0,
				value1: 1,
				dropTitle: '支出',
				options1: [
					{
						label: '支出',
						value: 2,
					},
					{
						label: '收入',
						value: 3,
					}
				],
				rechargeShow: false,//充值弹窗
				rechargeKeyboard: true,
				rechargeValue: '',//充值金额
				rechargeRecord: [],//充值记录
				balanceRecord:[],//余额明细
			};
		},
		onLoad() {
			this.url = uni.getStorageSync('URL');
		},
		onShow() {
			this.userData = uni.getStorageSync('userData')
			this.getUserData()
			this.getUserreData()
			this.getbalanceRecord()
		},
		methods: {
			tabChange(index) {
				this.current = index;
				if(this.current == 1) {
					this.getRechargeRecord()
				}
			},
			recharge() {
				this.rechargeShow = true
			},
			withdraw() {
				uni.$u.toast('提现功能暂未开放')
			},
			open(index) {
				// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
				// 同时内部会自动给当前展开项进行高亮
				this.$refs.uDropdown.highlight();
			},
			close(index) {
				// 关闭的时候，给当前项加上高亮
				// 当然，您也可以通过监听dropdown-item的@change事件进行处理
				this.$refs.uDropdown.highlight(index);
			},
			dropChange(e) {
				this.value1 = e
				if(this.value1 == 2) {
					this.dropTitle = '支出'
					this.getbalanceRecord()
				}else if(this.value1 == 3) {
					this.dropTitle = '收入'
					this.getbalanceRecord()
				}
			},
			//获取用户余额明细
			getbalanceRecord() {
				uni.request({
					url: this.url + 'home/user/User/balanceRecord',
					method: 'POST',
					data: {
						busid: this.userData.id,
						type: this.value1
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						if(res.statusCode === 200){
							const result = res.data.data
							this.balanceRecord = result.recode
							
						}
					},
				})
			},
			// 获取用户信息
			getUserData() {
				uni.request({
					url: this.url + 'home/user/User/getUserDetail',
					method: 'POST',
					data: {
						busid: this.userData.id
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						if(res.statusCode === 200){
							const result = res.data.data
							this.balance = result.money
						}
					},
				})
			},
			// 获取用户支出收入总数
			getUserreData() {
				uni.request({
					url: this.url + 'home/user/User/getRecord',
					method: 'POST',
					data: {
						busid: this.userData.id
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						if(res.statusCode === 200){
							const result = res.data.data
							this.pay = parseFloat(result.payTotal).toFixed(2)
							this.income = parseFloat(result.incomeTotal).toFixed(2)
						}
					},
				})
			},
			// 按键被点击(点击退格键不会触发此事件)
			rechargeval(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.rechargeValue += val;
			},
			// 退格键被点击
			rechargeback() {
				// 删除value的最后一个字符
				if(this.rechargeValue.length) this.rechargeValue = this.rechargeValue.substr(0, this.rechargeValue.length - 1);
			},
			chancel() {
				this.rechargeKeyboard = true
			},
			getRechargeRecord() {
				uni.request({
					url: this.url + 'home/user/User/getRechargeRecord',
					method: 'POST',
					data: {
						busid: this.userData.id,
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						this.rechargeRecord = res.data.data
					}
				})
			},
			//确认充值
			subRecharge() {
				this.rechargeKeyboard = true
				if(this.rechargeValue == '') {
					uni.$u.toast('充值金额不能为空')
				}else {
					uni.request({
						url: this.url + 'home/user/User/subRecharge',
						method: 'POST',
						data: {
							busid: this.userData.id,
							money: this.rechargeValue
						},
						header: {
							"X-Requested-With": "XMLHttpRequest"
						},
						dataType: 'json',
						success: (res)=> {
							if(res.statusCode === 200){
								let data = res.data.data
								let appId = data.appId
								let timeStamp = data.timeStamp
								let nonceStr = data.nonceStr
								let packageX = data.package
								let signType = data.signType
								let paySign = data.paySign
								let orderid = data.orderid
								let busid = this.userData.id
								var that = this
								
								//调用支付接口
								uni.requestPayment({ 
									//下面参数为必传
									provider: 'wxpay', //支付类型
									appId: appId, //小程序Appid
									timeStamp: timeStamp , //创建订单时间戳
									nonceStr: nonceStr,
									package: packageX, // 订单包
									signType: signType, // 加密方式统一'MD5'
									paySign: paySign, // 后台支付签名返回
									
									success(res) {
										uni.$u.toast('支付成功')
										if (res.errMsg === 'requestPayment:ok') {
											uni.request({
												url: uni.getStorageSync('URL') + 'home/user/User/changeStatus',
												method: 'POST',
												data: {
													orderid: orderid,
													busid: busid
												},
												header: {
													"X-Requested-With": "XMLHttpRequest"
												},
												dataType: 'json',
												success: (res)=> {
													that.rechargeShow = false
													that.getUserData()
												}
											})
										}
									},
									fail(err) {
										uni.$u.toast('支付失败')
									}
								});
							}
						},
					})
				}
			}
		},
		filters: {
			dateFormat: function(val) {// 格式化时间
				const dt = new Date(val*1000)
				const y = dt.getFullYear()
				const m = dt.getMonth() +1
				const d = dt.getDate()
				const hh = dt.getHours()
				const mm = dt.getMinutes()
				 
				return `${y}-${m}-${d} ${hh}:${mm}`
			},
		},
	}
</script>

<style lang="scss">
page {
	background-color: #f5f6f7;
}
.top-card {
	width: 90%;
	height: 450rpx;
	background-color: #fff;
	margin: 30rpx auto;
	border-radius: 30rpx; /* 设置统一的 border-radius 值 */
	border-bottom-left-radius: 0; /* 设置底部左侧边的圆角为 0 */
	border-bottom-right-radius: 0; /* 设置底部右侧边的圆角为 0 */
	.top {
		height: 150rpx;
		background-image: url('https://adjyxw.h1668.com/uploads/20230801/bf08d7916a47a45590e75af305965bbf.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		border-radius: 30rpx; /* 设置统一的 border-radius 值 */
		border-bottom-left-radius: 0; /* 设置底部左侧边的圆角为 0 */
		border-bottom-right-radius: 0; /* 设置底部右侧边的圆角为 0 */
		display: flex;
		.top-left, .top-right {
			display: flex;
			align-items: flex-end;
			justify-content: center;
			color: #f8e3c3;
		}
		.top-left {
			font-size: 1.4rem;
			margin-left: 20rpx;
		}
		.top-right {
			font-size: 2rem;
			margin-left: 5rpx;
		}
	}
	.operate {
		height: 80rpx;
		display: flex;
		.operate-left, .operate-right {
			width: 50%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
		}
	}
	.content {
		display: flex;
		height: 200rpx;
		.content-left {
			width: 50%;
			height: 100%;
			.left-title {
				font-size: 1.25rem;
				margin-top: 50rpx;
				text-align: center;
			}
			.left-content {
				margin-top: 20rpx;
				display: flex;
				align-items: flex-end;
				justify-content: center;
				color: black;
				.left {
					font-size: 1.25rem;
				}
				.right {
					font-size: 1.4rem;
				}
			}
		}
		.content-right {
			width: 50%;
			height: 100%;
			.right-title {
				font-size: 1.25rem;
				margin-top: 50rpx;
				text-align: center;
			}
			.right-content {
				margin-top: 20rpx;
				display: flex;
				align-items: flex-end;
				justify-content: center;
				color: black;
				.left {
					font-size: 1.25rem;
				}
				.right {
					font-size: 1.4rem;
				}
			}
		}
	}
}
.tabs {
	width: 90%;
	margin: 0 auto;
}
.data {
	width: 90%;
	height: auto;
	margin: 0 auto;
	background-color: #f5f6f7;
	.data-opt {
		display: flex;
		background-color: #fff;
		.opt-item {
			width: 130rpx;
			height: 40rpx;
			margin-left: 15rpx;
		}
	}
	.data-content:first-child {
	   margin-top: 0;
	}
	.data-content {
		background-color: #fff;
		margin-top: 10rpx;
		padding: 10rpx;
		.title {
			text-align: left;
			color: black;
			font-size: 1.2rem;
		}
		.math {
			text-align: right;
			color: black;
			font-size: 1.1rem;
		}
		.time {
			text-align: left;
			font-size: 1rem;
		}
	}
}
.recharge {
	.recharge-title {
		margin-top: 50rpx;
		margin-left: 50rpx;
		font-size: 1.25rem;
	}
	.recharge-content {
		display: flex;
		margin-top: 50rpx;
		margin-left: 50rpx;
		.content-left {
			font-size: 2rem;
			color: black;
		}
	}
	.recharge-button {
		width: 60%;
		margin: 50rpx auto;
	}
	.recharge-keyboard {
		height: 50%;
	}
}
</style>
